*{
    box-sizing: border-box;
}
body{
    margin: 0;
}
.pagein-enter{
        transform: translate(100%,0);
    }
.pagein-enter-active,.pagein-leave-active{
        transition: all 0.7s;
        position: absolute;
        width: 100%;
 			}
    .pagein-enter-to{
        transform: translate(0,0);
    }
    .pagein-leave{
        transform: translate(0,0);
    }
    .pagein-leave-to{
        transform: translate(-100%,0);
    }

    .pageout-enter{
        transform: translate(-100%,0);
    }
    .pageout-enter-active,.pageout-leave-active{
        transition: all 0.7s;
        position: absolute;
        width: 100%;
    }
    .pageout-enter-to{
        transform: translate(0,0);
    }
    .pageout-leave{
        transform: translate(0,0);
    }
    .pageout-leave-to{
        transform: translate(100%,0);
    }